<template>
    <div class="warpper-box">
      <div class="inner_box">
       <form-create 
       v-model="params.fApi" 
       :rule="params.rule" 
       :option="params.option" 
       @btn-search-click="loadList(true)" 
       @btn-reset-click="reset"/>
      <system-list
       :key="keys"
       :tableData="tables.tableData" 
       :tableLabel="tables.tableLabel" 
       :models="tables" 
       @on-search-click="loadList"
       @on-details-click="details"
       />
       <el-drawer
        title="详情"
        :visible.sync="drawer"
        direction="btt">
            <el-divider content-position="left">操作日志</el-divider>
            <system-list
            :key="keyss"
            :tableData="operationLog.tableData" 
            :tableLabel="operationLog.tableLabel" 
            :models="operationLog" 
            />
        </el-drawer>
      </div>
    </div>
  </template>
  
  <script>
  import { PARAMS_DATALOG,OPTION_INLINE,DATA_LOG_LABEL,OPTION_BLOCK} from "./systemUser/system_form"
  import SystemList from "./systemUser/system_list"
  import {getDataLogList} from "@/api/system_api"
  export default {
    components:{
      SystemList
    },
    data() {
      return {
        keys:1,
        keyss:1,
        params:{
          fApi:{},
          rule:PARAMS_DATALOG,
          option:OPTION_INLINE
        },
        tables:{
          total:0,
          tableData:[],
          tableLabel: DATA_LOG_LABEL
        },
        page:{
          pageNum:1,
          pageSize:10,
        },
        operationLog:{
            total:0,
            tableData:[],
            tableLabel: DATA_LOG_LABEL
        },
        drawer:false
      };
    },
    mounted() {
      this.loadList(true);
      this.$nextTick(()=>{
        this.params.fApi.setValue({"time":"","name":""});
      })
    },
    methods: {
      async loadList(formData) {
        console.log(formData)
        let params = {};
        let query = this.params.fApi.bind();
        params.name = query.name;
        params.startTime = query.time.length >= 1 ? query.time[0] : '';
        params.endTime = query.time.length >= 1 ? query.time[1] : '';
        if(formData !== undefined && formData.type === 'page'){
          this.page.pageNum = formData.page;
          this.page.pageSize = formData.pageSize;
        }
        if(formData===true){
          this.page.pageNum = 1;
          this.keys++;
        }
        params.pageNum = this.page.pageNum;
        params.pageSize = this.page.pageSize;
        const {code,data,msg} = await getDataLogList(params);
        if(code===200){
          this.tables.tableData = data.list;
          this.tables.total = data.total;
        }
      },
      details(){
        this.operationLog.tableData = [
          {
              "id": 552,
              "p1": "采购员",
              "p11": "程安",
              "p2": "发起招标",
              "p3": "",
              "createTime": "2021-09-20 16:15:31"
          },
        ]
        this.drawer = true;
      },
      reset(){
        this.params.fApi.resetFields();
        this.loadList(true);
      }
    }
  };
  </script>